<template>
    <h1>{{user}}</h1>
  <h3>姓名:{{ name }}</h3>
  <h3>年龄:{{ age }}</h3>
  <h3>薪水:{{ salary }}</h3>
  <button @click="name+='-'">更新姓名</button>
  <button @click="age++">更新年龄</button>
  <button @click="salary++">更新薪水</button>
</template>

<script>
import { reactive, toRef , ref, toRefs} from 'vue'
export default {
    setup () {
        const user = reactive({
            name: 'niuniu',
            age: 18,
            job: {
                salary: 100
            }
        })
        // toRef只能处理一个
        // toRefs可以批量处理 要处理哪个 把对象放进去就可以
        // const name1 = user.name
        // console.log(name1)
        // const name2 = toRef(user, 'name')
        // console.log(name2)

        const copyUser = toRefs(user)
        console.log(copyUser)
        return {
            user,
            // 响应
            name: toRef(user, 'name'),
            age: toRef(user, 'age'),
            salary: toRef(user.job, 'salary'),
            // 不响应
            // name: user.name,
            // age: user.age,
            // salary: user.job.salary
            // 另一种 改的就不是user了
            // name: ref(user.name),
            // age: ref(user.age),
            // salary: ref(user.job.salary)
            // ...toRefs(user)
        }
    }
};
</script>

<style>
</style>